﻿
@{
    ViewData["Title"] = "Ribbons";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Ribbons</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="position-relative p-3 bg-gray" style="height: 180px">
                                <div class="ribbon-wrapper">
                                    <div class="ribbon bg-primary">
                                        Ribbon
                                    </div>
                                </div>
                                Ribbon Default <br />
                                <small>.ribbon-wrapper.ribbon-lg .ribbon</small>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="position-relative p-3 bg-gray" style="height: 180px">
                                <div class="ribbon-wrapper ribbon-lg">
                                    <div class="ribbon bg-info">
                                        Ribbon Large
                                    </div>
                                </div>
                                Ribbon Large <br />
                                <small>.ribbon-wrapper.ribbon-lg .ribbon</small>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="position-relative p-3 bg-gray" style="height: 180px">
                                <div class="ribbon-wrapper ribbon-xl">
                                    <div class="ribbon bg-secondary">
                                        Ribbon Extra Large
                                    </div>
                                </div>
                                Ribbon Extra Large <br />
                                <small>.ribbon-wrapper.ribbon-xl .ribbon</small>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-sm-4">
                            <div class="position-relative p-3 bg-gray" style="height: 180px">
                                <div class="ribbon-wrapper ribbon-lg">
                                    <div class="ribbon bg-success text-lg">
                                        Ribbon
                                    </div>
                                </div>
                                Ribbon Large <br /> with Large Text <br />
                                <small>.ribbon-wrapper.ribbon-lg .ribbon.text-lg</small>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="position-relative p-3 bg-gray" style="height: 180px">
                                <div class="ribbon-wrapper ribbon-xl">
                                    <div class="ribbon bg-warning text-lg">
                                        Ribbon
                                    </div>
                                </div>
                                Ribbon Extra Large <br /> with Large Text <br />
                                <small>.ribbon-wrapper.ribbon-xl .ribbon.text-lg</small>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="position-relative p-3 bg-gray" style="height: 180px">
                                <div class="ribbon-wrapper ribbon-xl">
                                    <div class="ribbon bg-danger text-xl">
                                        Ribbon
                                    </div>
                                </div>
                                Ribbon Extra Large <br /> with Extra Large Text <br />
                                <small>.ribbon-wrapper.ribbon-xl .ribbon.text-xl</small>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container-fluid -->
